<link rel="import" href="../../../html/polymer.html">
<link rel="import" href="../../../cr_elements/cr_icon_button/cr_icon_button.html">
<link rel="import" href="../../../cr_elements/cr_icons_css.html">
<link rel="import" href="../../../cr_elements/cr_input/cr_input.html">
<link rel="import" href="../../../cr_elements/shared_vars_css.html">
<link rel="import" href="../../../html/i18n_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-tooltip/paper-tooltip.html">
<link rel="import" href="cr_policy_network_behavior_mojo.html">
<link rel="import" href="cr_policy_network_indicator_mojo.html">
<link rel="import" href="network_config_element_behavior.html">
<link rel="import" href="network_shared_css.html">

<dom-module id="network-password-input">
  <template>
    <style include="network-shared">
      :host {
        display: block;
      }

      :host([allow-error-message]) #input {
        --cr-input-error-display: block;
        margin-bottom: 0;
      }

      #container {
        align-items: center;
        display: flex;
        flex-direction: row;
      }

      cr-input {
        flex: 1;
      }

      paper-tooltip {
        --paper-tooltip-min-width: 0px;
      }

      cr-policy-network-indicator-mojo {
        --cr-tooltip-icon-margin-start: var(--cr-controlled-by-spacing);
      }
    </style>

    <div id="container">
      <cr-input id="input" label="[[label]]" value="{{value}}"
          disabled="[[getDisabled_(disabled, property)]]"
          type="[[getInputType_(showPassword)]]"
          on-mousedown="onMousedown_"
          on-touchstart="onMousedown_"
          on-keydown="onKeydown_"
          invalid="[[invalid]]"
          error-message="[[errorMessage]]">
        <template is="dom-if" if="[[!showPolicyIndicator_]]" restamp>
          <div slot="suffix">
            <cr-icon-button id="icon"
                class$="[[getIconClass_(showPassword)]]"
                aria-describedby="passwordVisibilityTooltip"
                on-click="onShowPasswordTap_"
                on-touchend="onShowPasswordTap_">
            </cr-icon-button>
            <paper-tooltip id="passwordVisibilityTooltip"
                for="icon"
                position="[[tooltipPosition_]]"
                fit-to-visible-bounds role="tooltip">
              [[getShowPasswordTitle_(showPassword)]]
            </paper-tooltip>
          </div>
        </template>
      </cr-input>
      <template is="dom-if" if="[[showPolicyIndicator_]]" restamp>
        <cr-policy-network-indicator-mojo
            property="[[property]]" tooltip-position="left">
        </cr-policy-network-indicator>
      </template>
    </div>
  </template>
  <script src="network_password_input.js"></script>
</dom-module>
